<template>
  <div class="blogList">
    <div>
      <el-header style="position: relative">
    <span class="radio" style="float: left">
      排序方式：
      <el-radio-group v-model="reverse">
        <el-radio :label="true">倒序</el-radio>
        <el-radio :label="false">正序</el-radio>
      </el-radio-group>
      &nbsp;&nbsp;&nbsp;
<!--        <el-button type="info" round="true" @click="allBlog()">全部申请</el-button>-->
    </span>
        <div style="position: absolute;right: 250px;top:5px;font-size: 17px" >按月搜索:</div>


        <div class="selectDate" style="float: right;">
          <el-date-picker
              v-model="value1"
              type="month"
              value-format="yyyy-MM"
              :clearable="false"
              placeholder="选择月份">
          </el-date-picker>
          <el-button class="search_button" icon="el-icon-search" circle="true" @click="searchDate()" ></el-button>
        </div>


      </el-header>
    </div>
    <el-main style="overflow-y: scroll; max-height: 650px" v-infinite-scroll="requestData">
      <div class="block">
        <el-timeline :reverse="reverse">
          <el-timeline-item  v-for="(item,index) in out" :timestamp="item.createTime" placement="top">
            <el-card>
              <h3 style="color: #55a1ff;float: right"><i class="fa fa-check-circle-o"></i>已通过审核</h3>
              <h4>申请人: {{item.outName}}</h4>
              <h4>外出地点: {{item.outAddress}}</h4>
              外出理由:
              <p>{{item.outResult}}</p>

            </el-card>
          </el-timeline-item>

        </el-timeline>
      </div>
    </el-main>
  </div>
</template>

<script>
import {outList} from "@/api/admin_api";

export default {
  name: "blog_list",
  data(){
    return{
      reverse:true,
      value1: '',
      defaultDate:'2022-07-01',
      out:[
        {outName: '王杰',outAddress: '盘龙区',outResult: '去延安医院做手术',createTime: '2022-07-21 17:09:58',outStartTime: '2022-07-21 17:09:58',outEndTime:'2022-07-21 17:09:58'},
        {outName: '李华',outAddress: '五华区',outResult: '去买药',createTime: '2022-07-21 17:09:58',outStartTime: '2022-07-21 17:09:58',outEndTime:'2022-07-21 17:09:58'},
        {outName: '张章',outAddress: '盘龙区',outResult: '去延安医院做手术',createTime: '2022-07-21 17:09:58',outStartTime: '2022-07-21 17:09:58',outEndTime:'2022-07-21 17:09:58'},
      ],
      imgList:[],
      blogId:[],
      outCopy:[],
      outIndex:0,

    }
  },
  methods:{
    // 全部申请
    // allBlog(){
    //   let _this = this;
    //   _this.value1 = '';
    //   _this.out = [];
    //   _this.outCopy.forEach(function (item){
    //     _this.out.push(item);
    //   })
    //
    // },

    // 搜索指定日期的博客
    searchDate(){
      let _this = this;
      this.out = [];
      this.outCopy.forEach(function (item,index){
        if (_this.outCopy[index].createTime.substring(0,7) == _this.value1){
          _this.out.push(_this.outCopy[index]);
        }
      })
    },

    //请求三条数据
    // requestData(){
    //   let _this = this;
    //   if (_this.blogIndex<_this.blogId.length){
    //     for (let i = 0;i<2;i++){
    //       getBlog(_this.blogId[_this.blogIndex++]).then((res)=>{
    //         _this.out.push(res.data.data)
    //       })
    //     }
    //   }
    // },


  },
  // 开始查询博客
  created() {
    outList().then((res)=>{
      this.out = res.data.data;
    })
    this.outCopy = this.out;

  },



}
</script>

<style scoped>
.blogList .el-header{
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
/*搜索按钮*/
.selectDate .search_button{
  background: transparent;
  color: #DCDFE6;
  border: none;
  position: absolute;
  font-size: 20px;
  right: 20px;
  top: 8px;
}
.selectDate .search_button:hover{
  color: #54b6ff;
}

</style>